<template>
  <slot><h1>title:</h1></slot>
  <div class="rate_wraper" :style="fontstyle">
    <div class="rate" @mouseout="mouseOut">
      <span @mouseover="mouseOver(num)"  v-for="num in 5" :key="num">☆</span>
      <div class="hollow" :style="fontwidth">
        <span @mouseover="mouseOver(num)" @click="handleClick(num)" v-for="num in 5" :key="num">★</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import {defineProps, ref, computed} from "vue";

  let props = defineProps({
    modelValue: {type: Number, default: 0},
    width: {type: Number, default: 30},
    theme: {type: String, default: "orange" as keyof typeof themeObj},
  });

  const themeObj = {
    black: "#00",
    white: "#fff",
    red: "#f5222d",
    orange: "#fa541c",
    yellow: "#fadb14",
    green: "#73d13d",
    blue: "#40a9ff",
  } as Record<string, string>;

  const fontstyle = computed(() => {
    return `color:${themeObj[props.theme]};`;
  });

  const emit = defineEmits(["update:modelValue"]);

  let width = ref(props.modelValue);

  function mouseOver(i: number) {
    width.value = i;
  }

  function mouseOut() {
    width.value = props.modelValue;
  }

  function handleClick(i:number){
    console.log("click",i)
    emit("update:modelValue",i);
  }

  const fontwidth = computed(() => `width:${width.value * 20}%;`);
</script>

<style scoped>
  .rate_wraper {
    font-size: 300px;
    /* line-height:300px; */
  }
  .rate {
    position: relative;
    display: inline-block;
  }
  .rate > .hollow {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
  }
</style>
